<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Canvas with Image Background and Lines</title>  
</head>  
<body>  
  
<canvas id="myCanvas" width="800" height="600"></canvas>  
  
<script>  
    // 获取canvas元素和2D渲染上下文  
    const canvas = document.getElementById('myCanvas');  
    const ctx = canvas.getContext('2d');  
  
    // 图片加载完成的回调函数  
    function drawImageAndLines(image) {  
        // 将图片绘制到canvas上  
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);  
  
        // 定义四个坐标点（这里只是示例，你可以根据需要更改这些值）  
        const points = [  
            {x: 100, y: 100},  
            {x: 200, y: 200},  
            {x: 300, y: 100},  
            {x: 400, y: 200}  
        ];  
  
        // 开始绘制线条（这里绘制一个四边形）  
        ctx.beginPath();  
        ctx.moveTo(points[0].x, points[0].y);  
        for (let i = 1; i < points.length; i++) {  
            ctx.lineTo(points[i].x, points[i].y);  
        }  
        // 回到起始点以闭合四边形（可选）  
        ctx.lineTo(points[0].x, points[0].y);  
  
        // 设置线条样式并绘制  
        ctx.strokeStyle = 'red'; // 设置线条颜色  
        ctx.lineWidth = 5; // 设置线条宽度  
        ctx.stroke(); // 绘制线条  
    }  
  
    // 加载图片  
    const image = new Image();  
    image.onload = function() {  
        drawImageAndLines(this); // 图片加载完成后调用绘制函数  
    };  
    image.src = './rough_house_decoration_1.png'; // 替换为你的图片路径  
</script>  
  
</body>  
</html>